<template>
  <div class="container">
    <ul class="container-ul">
      <li v-for="(item,index) in list.list" v-if="list.list.length > 0"
          @mouseenter="enter(index)" @mouseleave="leave(index)"
          :key="index">
        <div class="container-box">
          <div class="container-right">
            <div class="container-title">
              <p class="container-right-time">{{item.time | dateFormat}}</p>
              <p class="container-right-click" v-if="item.boole">
                <el-button type="text" @click="onclickS(index)">
                  <i class="el-icon-close"></i>
                </el-button>
              </p>
            </div>
            <div class="name container-text">
              <span
                :style="{ 'max-height': item.status ? textHeight : '' }"
                :class="{ statusText:item.status }"
                class="titleText"
                :ref="'desc' + index"
              >
                {{ item.msg }}
              </span>
              <span
                v-if="item.idShowText"
                @click="onclick(index)"
                :class="{ openSpan: item.status }"
                class="openClose"
              > {{ item.status ? "展开" : "收起" }}</span
              >
            </div>
          </div>
        </div>
      </li>

    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        textHeight: null,
        status: false,
        idShowText: false,
        total: 0,
        pager: {
          number: 1,
          size: 5
        },
        list: {}

      };
    },
    created() {


    },
    mounted() {
      var arr = this.$store.getters.messageList
      arr.list.forEach((item, index) => {
        item.status = false
        item.idShowText = false
        item.boole = false
        this.$nextTick(() => {
          setTimeout(() => {
            this.calculateText(index);
          }, 300);
        });
      })
      this.list = arr
    },
    methods: {
      calculateText(index) {
        // 这是默认两行数据的高度，一行的高度可以自定义 可以*3 *4达到三行或者四行显示展示和收起的效果
        let twoHeight = 20 * 3;
        this.textHeight = `${twoHeight}px`;
        let sr = 'desc' + index
        let curHeight = this.$refs[sr][0].offsetHeight;
        if (curHeight > twoHeight) {
          this.list.list[index].status = true;
          this.list.list[index].idShowText = true;
        } else {
          this.list.list[index].status = false;
          this.list.list[index].idShowText = false;
        }
        this.$forceUpdate()

      },
      onclick(index) {
        this.list.list[index].status = !this.list.list[index].status
        this.$forceUpdate()
      },

      onclickS(index){
        console.log(index,"-----")
        var data = this.$store.getters.messageList
        console.log(data.list,"-----89889-----")
        for(let i = 0;i < data.list.length;i++){
          if(i === index){
            data.list.splice(i,1)
          }
        }
        this.$store.dispatch("message/setMessageSetting", data)
        console.log(this.$store.getters.messageList,"----------")
        // data.list.forEach((ite,idx)=>{
        //   ite.status = false
        //   ite.idShowText = false
        //   ite.boole = false
        //   this.$nextTick(() => {
        //     this.list.list
        //     setTimeout(() => {
        //       this.calculateText(idx);
        //     }, 300);
        //   });
        // })
        // this.list = data
        // console.log(this.list,"-=-=-this.list-----")
        this.$forceUpdate()
      },
      enter(index){
        this.list.list[index].boole = true
        this.$forceUpdate()
      },
      leave(index){
        this.list.list[index].boole = false
        this.$forceUpdate()
      },
    }
  };
</script>

<style scoped lang="scss">
  @import "@/assets/scss/message/list.scss";

  .name {
    position: relative;

    .titleText {
      font-size: 14px;
    }

    .openClose {
      font-size: 14px;
      color: #25dbe6;
      cursor: pointer;
    }

    .openSpan {
      position: absolute;
      right: 0;
      bottom: 2px;
    }

    .statusText {
      overflow: hidden;
      display: block;
    }

    .statusText:after {
      content: "...";
      position: absolute;
      bottom: 0;
      right: 2px;
      width: 48px;
      padding-left: 30px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0.2), #fff 45%);
    }
  }
</style>
